<template>
  <div>
    <nav-bar title="优选好券"/>
    <div class="content_scroll">
      <ul class="coupon_box">
        <li 
          class="coupon_list" 
          v-for="(item, index) in list" 
          :key="index">
          <div class="list_left">
            <div class="amount_top">
              <span>¥</span>
              <span>10</span>
            </div>
            <div class="amount_down">满38减10元</div>
          </div>
          <div class="list_center">
            <div class="list_coupon">10元代金券</div>
            <div class="game_type">·BT游戏专用</div>
            <div class="card_progress_box">
              <div class="card_progress">
                <van-progress 
                  :percentage="item.surplus" 
                  :show-pivot="false"
                  color="#FF5543"
                  track-color="#cccccc"/>
              </div>
              <span>剩余：<i style="color: #FF8700;">{{item.surplus}}%</i></span>
            </div>
          </div>
          <div class="list_btn">立即领取</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import NavBar from '../../../components/common/navbar/NavBar.vue'
export default {
  components: { NavBar },
  data() {
    return {
      list: [
        {amount: 10, surplus: 45, coupontype: 'BT'},
        {amount: 10, surplus: 88, coupontype: '折扣'},
        {amount: 10, surplus: 60, coupontype: 'H5'},
        {amount: 10, surplus: 78, coupontype: 'BT'},
        {amount: 10, surplus: 95, coupontype: '折扣'},
        {amount: 10, surplus: 20, coupontype: 'H5'},
      ]
    }
  },
}
</script>

<style lang="less" scoped>
.coupon_box {
  box-sizing: border-box;
  width: 9.146667rem;
  margin: .133333rem .426667rem;
}

.coupon_list {
  width: 9.146667rem;
  height: 2.453333rem;
  background: #FFFFFF;
  border-radius: .266667rem;
  margin-bottom: .133333rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  .list_left {
    box-sizing: border-box;
    text-align: center;
    width: 2.266667rem;
    height: 2.453333rem;
    background: linear-gradient(-21deg, #FF1E00, #FF9F00);
    font-size: .32rem;
    padding: .2rem 0;
    color: #ffffff;
    .amount_top {
      span:nth-child(1) {
        font-size: .453333rem;
      }
      span:nth-child(2) {
        font-size: 1.28rem;
      }
    }
  }
  .list_center {
    flex: 1;
    padding-left: .266667rem;
    font-size: .32rem;
    .list_coupon {
      font-size: .373333rem;
      font-weight: bold;
      color: #222;
    }
    .game_type {
      line-height: .666667rem;
      color: #999999;
    }
    .card_progress_box {
      display: flex;
      align-items: center;
      font-size: .266667rem;
      color: #999999;
      span {
        padding-left: .133333rem;
      }
    }
  }
  .list_btn {
    width: 1.786667rem;
    height: .613333rem;
    background: linear-gradient(-36deg, #FF1814, #FF7401);
    border-radius: .306667rem;
    font-size: .346667rem;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    line-height: .613333rem;
    margin-right: .266667rem;
  }
}

.card_progress {
  width: 2.666667rem;
}
</style>